<template>
  <div
    ref="resizableDiv"
    class="setting-panel resizable-div"
  >
    <div>属性设置{{ nodeData ? " - " + nodeData.text.value : "" }}</div>

    <VBtn
      size="38"
      style="float: inline-end;margin-block-start: -30px;"
      @click="showSettingDialog"
    >
      <VIcon
        icon="tabler-window-maximize"
        size="22"
      />
    </VBtn>

    <VDivider style="margin-block: 10px;margin-inline: 0;" />
    <VExpansionPanels
      v-model="panel"
      multiple
      class="no-icon-rotate"
    >
      <VExpansionPanel
        v-if="showNodeSetting"
        :key="0"
      >
        <VExpansionPanelTitle>
          基本属性
        </VExpansionPanelTitle>
        <VExpansionPanelText>
          <VAutocomplete
            v-model="id"
            class="setting-mb-12"
            variant="outlined"
            label="请选择组件..."
            :items="cmpItems"
            item-title="componentName"
            item-value="id"
            :multiple="componentMultiple"
            clearable
          />
          <VTextField
            v-if="showComponentId == 1"
            v-model="componentId"
            class="setting-mb-12"
            label="组件ID"
          />
          <VTextField
            v-if="showComponentName == 1"
            v-model="componentName"
            class="setting-mb-12"
            label="组件名称"
          />
          
          <VAutocomplete
            v-show="cmpTypeShow"
            v-model="cmpType"
            label="组件类型"
            :items="nodeTypeList"
            class="setting-mb-12"
            clearable
            disabled
          /> 
         
          <VAutocomplete
            v-show="clazzShow"
            v-model="clazz"
            :items="clazzList"
            class="setting-mb-12"
            label="Java类或动态类"
            clearable
          />
          <VAutocomplete
            v-show="fallbackIdShow"
            v-model="fallbackId"
            label="选择降级组件"
            :items="fallbackList"
            item-title="componentName"
            item-value="id"
            clearable
            class="setting-mb-12"
          />
          <VAutocomplete
            v-show="languageShow"
            v-model="language"
            class="setting-mb-12"
            label="脚本语言"
            :items="scriptTypeList"
            clearable
          />
          <!--
            <VTextarea
            v-show="scriptShow"
            v-model="script"
            class="setting-mb-12"
            label="脚本代码"
            clearable
            counter 
            auto-grow
            rows="10"
            row-height="30"
            /> 
          -->
          
          <Codemirror
            v-if="scriptShow"
            ref="cmRef"
            v-model:value="script"
            :options="cmOptions"
            border
            height="300"
            width="100%"
            @change="onChange"
            @input="onInput"
            @ready="onReady"
          />
          

          <VAutocomplete
            v-show="cmpPreShow"
            v-model="cmpPre"
            :items="cmpList"
            class="setting-mb-12"
            label="前置组件"
            clearable
          />
          <VAutocomplete
            v-show="cmpFinallyOptShow"
            v-model="cmpFinallyOpt"
            :items="cmpList"
            class="setting-mb-12"
            label="后置组件"
            clearable
          />
          <VAutocomplete
            v-show="cmpToShow"
            v-model="cmpTo"
            multiple
            :items="cmpList"
            class="setting-mb-12"
            label="to"
            clearable
          />
          <VAutocomplete
            v-show="cmpDefaultOptShow"
            v-model="cmpDefaultOpt"
            :items="cmpList"
            class="setting-mb-12"
            label="defaultOpt"
            clearable
          />
          <VAutocomplete
            v-show="cmpTrueOptShow"
            v-model="cmpTrueOpt"
            :items="cmpList"
            class="setting-mb-12"
            label="trueOpt"
            clearable
          />
          <VAutocomplete
            v-show="cmpFalseOptShow"
            v-model="cmpFalseOpt"
            :items="cmpList"
            class="setting-mb-12"
            label="falseOpt"
            clearable
          />
          <VCheckbox
            v-show="cmpParallelShow"
            v-model="cmpParallel"
            label="是否开启异步循环parallel"
          />
          
          <VAutocomplete
            v-show="cmpDoOptShow"
            v-model="cmpDoOpt"
            :items="cmpList"
            class="setting-mb-12"
            label="doOpt"
            clearable
          />
          <VAutocomplete
            v-show="cmpBreakOptShow"
            v-model="cmpBreakOpt"
            :items="cmpList"
            class="setting-mb-12"
            label="breakOpt"
            clearable
          />
          <VTextField
            v-show="cmpIdShow"
            v-model="cmpId"
            class="setting-mb-12"
            label="id"
            clearable
          />
          <VTextField
            v-show="cmpTagShow"
            v-model="cmpTag"
            class="setting-mb-12"
            label="标签"
            clearable
          />
          <VTextField
            v-show="cmpMaxWaitSecondsShow"
            v-model="cmpMaxWaitSeconds"
            class="setting-mb-12"
            label="超时时间(秒)"
            clearable
          />
          <VTextField
            v-show="cmpDataNameShow"
            v-model="cmpDataName"
            class="setting-mb-12"
            label="组件参数名称(dataName)"
            clearable
          />
          <VTextarea
            v-show="cmpDataShow"
            v-model="cmpData"
            class="setting-mb-12"
            label="组件参数数据"
            :hint="cmpDataHint"
            clearable
            counter
            auto-grow
            rows="5"
            row-height="30"
          />
        </VExpansionPanelText>
      </VExpansionPanel>
      
      <VExpansionPanel
        v-if="showWhenSetting"
        :key="1"
      >
        <VExpansionPanelTitle>
          WHEN属性
        </VExpansionPanelTitle>
        <VExpansionPanelText>
          <VCheckbox
            v-model="when_ignoreError"
            label="忽略错误(ignoreError)"
          />

          <VRadioGroup
            v-model="ignore_type"
            inline
          >
            <div>
              <VRadio
                v-for="radio in ignoreTypeList"
                :key="radio.key"
                :label="radio.label"
                :color="radio.color"
                :value="radio.key"
              />
            </div>
          </VRadioGroup>

          <VTextField
            v-if="show_when_must"
            v-model="when_must"
            class="setting-mb-12 setting-mt-12"
            label="指定组件ID, 表达式ID"
            counter
            maxlength="50"
            hint="must(组件ID, 表达式ID)"
          />
        </VExpansionPanelText>
      </VExpansionPanel>

      <VExpansionPanel
        v-if="showThenSetting"
        :key="2"
      >
        <VExpansionPanelTitle>
          THEN属性
        </VExpansionPanelTitle>
        <VExpansionPanelText>
          <div v-if="false" />
        </VExpansionPanelText>
      </VExpansionPanel>

      <VExpansionPanel
        v-if="showFallbackSetting"
        :key="3"
      >
        <VExpansionPanelTitle>
          Fallback属性
        </VExpansionPanelTitle>
        <VExpansionPanelText>
          <VAutocomplete
            v-model="fallbackCommonId"
            class="setting-mb-12"
            variant="outlined"
            label="普通降级组件"
            :items="fallbackCommonItems"
            item-title="componentName"
            item-value="id"
            clearable
          />
          <VAutocomplete
            v-model="fallbackSwitchId"
            class="setting-mb-12"
            variant="outlined"
            label="选择降级组件"
            :items="fallbackSwitchItems"
            item-title="componentName"
            item-value="id"
            clearable
          />
          <VAutocomplete
            v-model="fallbackIfId"
            class="setting-mb-12"
            variant="outlined"
            label="条件降级组件"
            :items="fallbackIfItems"
            item-title="componentName"
            item-value="id"
            clearable
          />
          <VAutocomplete
            v-model="fallbackForId"
            class="setting-mb-12"
            variant="outlined"
            label="循环次数降级组件"
            :items="fallbackForItems"
            item-title="componentName"
            item-value="id"
            clearable
          />
          <VAutocomplete
            v-model="fallbackWhileId"
            class="setting-mb-12"
            variant="outlined"
            label="循环条件降级组件"
            :items="fallbackWhileItems"
            item-title="componentName"
            item-value="id"
            clearable
          />
          <VAutocomplete
            v-model="fallbackBreakId"
            class="setting-mb-12"
            variant="outlined"
            label="循环跳出降级组件"
            :items="fallbackBreakItems"
            item-title="componentName"
            item-value="id"
            clearable
          />
          <VAutocomplete
            v-model="fallbackIteratorId"
            class="setting-mb-12"
            variant="outlined"
            label="循环迭代降级组件"
            :items="fallbackIteratorItems"
            item-title="componentName"
            item-value="id"
            clearable
          />
        </VExpansionPanelText>
      </VExpansionPanel>
    </VExpansionPanels>

    <!-- 👉 新增组件 -->
        
    <!-- <CmpEdit
      :key="'cmp-edit-'+editKey"
      v-model:isDrawerOpen="addVisible"
      :oper-type="operType"
      :curr-row="currRow"
    />  -->
  </div>
</template>

<script lang="ts" setup>
import '@/utils/ivyApi.js'
import '@/utils/ivyApiConfig.js'
// import CmpEdit from '@/views/liteflow/cmp/CmpEditTabs.vue'
import Codemirror from "codemirror-editor-vue3"
import "codemirror/mode/clike/clike"
import "codemirror/mode/javascript/javascript"
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'

const props = defineProps({
  nodeData: {
    type: Object,
    default: () => {
      return {}
    },
  },
})

const emits  = defineEmits(["setNodeProp","showSettingDialog"])
const cmpDataHint = ref("JSON数据格式："+ JSON.stringify({ "name": "jack" }))

// 代码编辑器
const cmRef = ref()

const cmOptions = {
  mode: "text/x-java",
}

const onChange = (val, cm) => {
  //console.log(val, cm.getValue())
}

const onInput = val => {
  //console.log(val)
}

const onReady = cm => {
  //console.log(cm.focus())
}

onUnmounted(() => {
  cmRef.value?.destroy()
})


const panel = ref([0, 1, 2, 3])

// 使用 ref 创建响应式对象
const nodeDataRef = ref(props.nodeData)
const type = ref(nodeDataRef.value.type)
const cmpType = ref(nodeDataRef.value.properties.type)

const showNodeSetting = ref((type.value != 'GroupParallel' && type.value != 'GroupSerial' && type.value != 'fallback') || false)
const showWhenSetting = ref(type.value == 'GroupParallel' || false)
const showThenSetting = ref(type.value == 'GroupSerial' || false)
const showFallbackSetting = ref(type.value == 'fallback' || false)

// 组件信息面板
const id = ref(nodeDataRef.value.properties.id || nodeDataRef.value.properties.ids)
const componentMultiple = ref(false)

const checkType = () => {
  if(type.value == 'NodePreComponent' || type.value == 'NodeFinallyComponent'){
    componentMultiple.value = true
    
    return 2
  }
  componentMultiple.value = false
  
  return 1
}

const showComponentId = ref(checkType())
const showComponentName = ref(checkType())
const componentId = ref(nodeDataRef.value.properties.componentId)
const componentName = ref(nodeDataRef.value.properties.componentName)
const script = ref(nodeDataRef.value.properties.script || '')
const language = ref(nodeDataRef.value.properties.language)
const clazz = ref(nodeDataRef.value.properties.clazz)
const fallbackId = ref(nodeDataRef.value.properties.fallbackId)
const cmpPre = ref(nodeDataRef.value.properties.cmpPre)
const cmpFinallyOpt = ref(nodeDataRef.value.properties.cmpFinallyOpt)
const cmpId = ref(nodeDataRef.value.properties.cmpId)
const cmpTag = ref(nodeDataRef.value.properties.cmpTag)
const cmpMaxWaitSeconds = ref(nodeDataRef.value.properties.cmpMaxWaitSeconds)
const cmpTo = ref(nodeDataRef.value.properties.cmpTo)
const cmpDefaultOpt = ref(nodeDataRef.value.properties.cmpDefaultOpt)
const cmpTrueOpt = ref(nodeDataRef.value.properties.cmpTrueOpt)
const cmpFalseOpt = ref(nodeDataRef.value.properties.cmpFalseOpt)
const cmpParallel = ref(nodeDataRef.value.properties.cmpParallel || 'false')
const cmpDoOpt = ref(nodeDataRef.value.properties.cmpDoOpt)
const cmpBreakOpt = ref(nodeDataRef.value.properties.cmpBreakOpt)
const cmpDataName = ref(nodeDataRef.value.properties.cmpDataName)
const cmpData = ref(nodeDataRef.value.properties.cmpData)

watch(componentId, val => {emits('setNodeProp', { "componentId": val })})
watch(componentName, val => { emits('setNodeProp', { "componentName": val })})
watch(type, val => { changeType(val);clazzSelect(val) })
watch(cmpType, val => { emits('setNodeProp', { "type": val })})
watch(script, val => { emits('setNodeProp', { "script": val })})
watch(language, val => { emits('setNodeProp', { "language": val })})
watch(clazz, val => { emits('setNodeProp', { "clazz": val })})
watch(fallbackId, val => { emits('setNodeProp', { "fallbackId": val })})
watch(cmpPre, val => { emits('setNodeProp', { "cmpPre": val })})
watch(cmpFinallyOpt, val => { emits('setNodeProp', { "cmpFinallyOpt": val })})
watch(cmpId, val => { emits('setNodeProp', { "cmpId": val })})
watch(cmpTag, val => { emits('setNodeProp', { "cmpTag": val })})
watch(cmpMaxWaitSeconds, val => { emits('setNodeProp', { "cmpMaxWaitSeconds": val })})
watch(cmpTo, val => { emits('setNodeProp', { "cmpTo": val })})
watch(cmpDefaultOpt, val => { emits('setNodeProp', { "cmpDefaultOpt": val })})
watch(cmpTrueOpt, val => { emits('setNodeProp', { "cmpTrueOpt": val })})
watch(cmpFalseOpt, val => { emits('setNodeProp', { "cmpFalseOpt": val })})
watch(cmpParallel, val => { emits('setNodeProp', { "cmpParallel": val })})
watch(cmpDoOpt, val => { emits('setNodeProp', { "cmpDoOpt": val })})
watch(cmpBreakOpt, val => { emits('setNodeProp', { "cmpBreakOpt": val })})
watch(cmpDataName, val => { emits('setNodeProp', { "cmpDataName": val })})
watch(cmpData, val => { emits('setNodeProp', { "cmpData": val })})

const cmpTypeShow = ref(false)
const clazzShow = ref(false)
const fallbackIdShow = ref(false)
const scriptShow =  ref(false)
const languageShow =  ref(false)
const cmpPreShow = ref(false)
const cmpFinallyOptShow = ref(false)
const cmpIdShow = ref(false)
const cmpTagShow = ref(false)
const cmpMaxWaitSecondsShow = ref(false)
const cmpToShow = ref(false)
const cmpDefaultOptShow = ref(false)
const cmpTrueOptShow = ref(false)
const cmpFalseOptShow = ref(false)
const cmpParallelShow = ref(false)
const cmpDoOptShow = ref(false)
const cmpBreakOptShow = ref(false)
const cmpDataNameShow = ref(false)
const cmpDataShow = ref(false)

const cmpItems = reactive([])
const fallbackCommonId = ref(nodeDataRef.value.properties.fallbackCommonId)
const fallbackCommonItems = reactive([])
const fallbackSwitchId = ref(nodeDataRef.value.properties.fallbackSwitchId)
const fallbackSwitchItems = reactive([])
const fallbackIfId = ref(nodeDataRef.value.properties.fallbackIfId)
const fallbackIfItems = reactive([])
const fallbackForId = ref(nodeDataRef.value.properties.fallbackForId)
const fallbackForItems = reactive([])
const fallbackWhileId = ref(nodeDataRef.value.properties.fallbackWhileId)
const fallbackWhileItems = reactive([])
const fallbackBreakId = ref(nodeDataRef.value.properties.fallbackBreakId)
const fallbackBreakItems = reactive([])
const fallbackIteratorId = ref(nodeDataRef.value.properties.fallbackIteratorId)
const fallbackIteratorItems = reactive([])

const cmpItemsSelect = async () => {

  const res = await $ivyApi.post(API_URLS.lfCmpList,{
    type: type.value,
  })

  if(showFallbackSetting.value){
    fallbackCommonItems.push(...res.data.common)
    fallbackSwitchItems.push(...res.data.switch)
    fallbackIfItems.push(...res.data.if)
    fallbackForItems.push(...res.data.for)
    fallbackWhileItems.push(...res.data.while)
    fallbackBreakItems.push(...res.data.break)
    fallbackIteratorItems.push(...res.data.iterator)
  }else{
    cmpItems.push(...res.data)
  }
}

watch(fallbackCommonId, val => { emits('setNodeProp', { "fallbackCommonId": val }) })
watch(fallbackSwitchId, val => { emits('setNodeProp', { "fallbackSwitchId": val }) })
watch(fallbackIfId, val => { emits('setNodeProp', { "fallbackIfId": val }) })
watch(fallbackForId, val => { emits('setNodeProp', { "fallbackForId": val }) })
watch(fallbackWhileId, val => { emits('setNodeProp', { "fallbackWhileId": val }) })
watch(fallbackBreakId, val => { emits('setNodeProp', { "fallbackBreakId": val }) })
watch(fallbackIteratorId, val => { emits('setNodeProp', { "fallbackIteratorId": val }) })

watch(id, val => { 
  if(type.value == 'NodePreComponent' || type.value == 'NodeFinallyComponent'){
    emits('setNodeProp', { "ids": val })
    
    return
  }
  if(val){
    for (const item of cmpItems) {
      if(item.id == val){
        componentId.value = item.componentId
        componentName.value = item.componentName
        cmpType.value = item.type
        script.value = item.script
        language.value = item.language
        clazz.value = item.clazz
        fallbackId.value = item.fallbackId
        cmpPre.value = item.cmpPre
        cmpFinallyOpt.value = item.cmpFinallyOpt
        cmpId.value = item.cmpId
        cmpTag.value = item.cmpTag
        cmpMaxWaitSeconds.value = item.cmpMaxWaitSeconds
        cmpTo.value = item.cmpTo
        cmpDefaultOpt.value = item.cmpDefaultOpt
        cmpTrueOpt.value = item.cmpTrueOpt
        cmpFalseOpt.value = item.cmpFalseOpt
        cmpParallel.value = item.cmpParallel
        cmpDoOpt.value = item.cmpDoOpt
        cmpBreakOpt.value = item.cmpBreakOpt
        cmpDataName.value = item.cmpDataName
        cmpData.value = item.cmpData
        changeType(item.type)
      }
    }
  }else{
    componentId.value = ''
    componentName.value = ''
    type.value = ''
    script.value = ''
    language.value = ''
    clazz.value = ''
    fallbackId.value = ''
    cmpPre.value = ''
    cmpFinallyOpt.value = ''
    cmpId.value = ''
    cmpTag.value = ''
    cmpMaxWaitSeconds.value = ''
    cmpTo.value = ''
    cmpDefaultOpt.value = ''
    cmpTrueOpt.value = ''
    cmpFalseOpt.value = ''
    cmpParallel.value = 'false'
    cmpDoOpt.value = ''
    cmpBreakOpt.value = ''
    cmpDataName.value = ''
    cmpData.value = ''
  }
  emits('setNodeProp', { "id": val })
})


// WHEN属性面板
const ignore_type = ref(nodeDataRef.value.properties.ignore_type || -1)
const show_when_must = ref(nodeDataRef.value.properties.ignore_type == 2 || false)

const ignoreTypeList = [
  { key: 1, label: '任一节点先执行完则忽略其他(any)', color: "success" },
  { key: 2, label: '指定任意节点先执行完则忽略其他(must)', color: "success" },
]

const when_ignoreError = ref(nodeDataRef.value.properties.when_ignoreError || false)
const when_any = ref(nodeDataRef.value.properties.when_any || false)
const when_must = ref(nodeDataRef.value.properties.when_must || '')

watch(ignore_type, val => { 
  if(typeof val === 'number' && val == 1){
    show_when_must.value = false
    emits('setNodeProp', { "ignore_type": val, "when_any": true, "when_must": null })
  }else if(typeof val === 'number' && val == 2){
    show_when_must.value = true
    emits('setNodeProp', { "ignore_type": val, "when_any": false, "when_must": null })
  }
})
watch(when_ignoreError, val => {emits('setNodeProp', { "when_ignoreError": val })})

// watch(when_any, val => { when_must.value = '';emits('setNodeProp', { "when_any": val })})
watch(when_must, val => { when_any.value = false;emits('setNodeProp', { "when_must": val })})

// 组件详情
const nodeTypeList = reactive([])

const nodeTypeSelect = async () => {
  const res = await $ivyApi.post(API_URLS.lfCmpTypeOptions,{})
  nodeTypeList.push(...res.data)
}

const fallbackList = reactive([])

const fallbackListSelect = async () => {
  const res = await $ivyApi.post(API_URLS.lfCmpFallbackList,{ type: 'fallback' })
  fallbackList.push(...res.data)
}

const scriptTypeList = reactive([])

const scriptTypeSelect = async () => {
  const res = await $ivyApi.post(API_URLS.lfCmpScriptOptions,{})
  scriptTypeList.push(...res.data)
}



onMounted(() => {
  initializeResizableDiv()

  if(showNodeSetting.value || showFallbackSetting.value){
    cmpItemsSelect()
  }
  nodeTypeSelect()
  fallbackListSelect()
  scriptTypeSelect()
  changeType(cmpType.value)
  clazzSelect(cmpType.value)

  cmpSelect()

  setTimeout(() => {
    cmRef.value?.refresh()
  }, 100)
})

const clazzList = reactive([])

const clazzSelect = async (val) => {
  clazzList.length = 0

  const res = await $ivyApi.post(API_URLS.lfCmpOptions,{type: val})
  clazzList.push(...res.data)
}

const cmpList = reactive([])

const cmpSelect = async () => {
  cmpList.length = 0
  const res = await $ivyApi.post(API_URLS.lfCmpCmpOptions,{})
  cmpList.push(...res.data)
}


const shows = [
  cmpTypeShow,
  clazzShow,
  fallbackIdShow,
  scriptShow,
  languageShow,
  cmpPreShow,
  cmpFinallyOptShow,
  cmpIdShow,
  cmpTagShow,
  cmpMaxWaitSecondsShow, 
  cmpToShow,
  cmpDefaultOptShow,
  cmpTrueOptShow,
  cmpFalseOptShow,
  cmpParallelShow,
  cmpDoOptShow,
  cmpBreakOptShow, 
  cmpDataNameShow,
  cmpDataShow,
]

const showsGD = [cmpTypeShow, cmpIdShow, cmpTagShow, cmpMaxWaitSecondsShow, cmpDataNameShow, cmpDataShow]

const changeType = val => {
  if (val == 'common'){
    changeTypes(showsGD, [clazzShow, cmpPreShow, cmpFinallyOptShow])
  }else if(val == 'switch'){
    changeTypes(showsGD, [clazzShow, cmpPreShow, cmpFinallyOptShow, cmpToShow, cmpDefaultOptShow])
  }else if(val == 'if'){
    changeTypes(showsGD, [clazzShow, cmpPreShow, cmpFinallyOptShow, cmpTrueOptShow, cmpFalseOptShow])
  }else if(val == 'break'){
    changeTypes(showsGD, [clazzShow, cmpPreShow, cmpFinallyOptShow])
  }else if(val == 'for' || val == 'while'){
    changeTypes(showsGD, [clazzShow, cmpPreShow, cmpFinallyOptShow, cmpParallelShow, cmpDoOptShow, cmpBreakOptShow])
  }else if(val == 'iterator'){
    changeTypes(showsGD, [clazzShow, cmpPreShow, cmpFinallyOptShow, cmpParallelShow, cmpDoOptShow])
  }else if(val == 'fallback'){
    changeTypes([clazzShow, fallbackIdShow], [])
  }else if(val == 'script'){
    changeTypes(showsGD, [scriptShow, languageShow])
  }else if(val == 'switch_script'){
    changeTypes(showsGD, [scriptShow, languageShow, cmpToShow, cmpDefaultOptShow])
  }else if(val == 'if_script'){
    changeTypes(showsGD, [scriptShow, languageShow, cmpTrueOptShow, cmpFalseOptShow])
  }else if(val == 'for_script' || val == 'while_script'){
    changeTypes(showsGD, [scriptShow, languageShow, cmpParallelShow, cmpDoOptShow, cmpBreakOptShow])
  }else if(val == 'break_script'){
    changeTypes(showsGD, [scriptShow, languageShow])
  }
}

const changeTypes = (showsGD, vals) => {
  const mergedArray = [...showsGD, ...vals]

  shows.forEach(item => {
    item.value = mergedArray.includes(item)
  })
}

const resizableDiv = ref(null)

const initializeResizableDiv = () => {
  const resizableHandle = document.createElement('div')

  resizableHandle.className = 'resizable-handle'
  resizableDiv.value.appendChild(resizableHandle)

  let initialX = 0
  let initialWidth = 0

  const startDrag = e => {
    e.preventDefault()
    initialX = e.clientX
    initialWidth = resizableDiv.value.offsetWidth
    document.addEventListener('mousemove', doDrag)
    document.addEventListener('mouseup', stopDrag)
  }

  const doDrag = e => {
    const newWidth = initialWidth - (e.clientX - initialX)

    resizableDiv.value.style.width = newWidth + 'px'
  }

  const stopDrag = () => {
    document.removeEventListener('mousemove', doDrag)
    document.removeEventListener('mouseup', stopDrag)
  }

  resizableHandle.addEventListener('mousedown', startDrag)
}

// 新增操作&编辑操作
// const editKey = ref(1)
// const addVisible = ref(false)
// const operType = ref(2) // 操作类型：0新增，1更新,2属性设置
// const currRow = ref({})
const showSettingDialog = () => {
  // addVisible.value = true
  emits('showSettingDialog')
}
</script>

<style scoped>
.setting-panel {
  padding: 10px;
  background: #f9f9f9;
  block-size: calc(100vh - 330px);
  inline-size: 320px;
  margin-block-start: 66px;

  /* border: 1px solid #ccc; */
  margin-inline-end: 14px;
  overflow-y: scroll;
}

.style-wrapper {
  display: flex;
}

.style-item {
  border: 1px solid #fff;
  block-size: 20px;
  cursor: pointer;
  inline-size: 20px;
  margin-inline-end: 5px;
}

.setting-item-title {
  color: #333;
  font-size: 14px;
  margin-block-start: 10px;
}

.setting-mb-12 {
  margin-block-end: 12px;
}

.setting-mt-12 {
  margin-block-start: 12px;
}
</style>

<style>
.resizable-div {
  position: relative;
}

.resizable-handle {
  position: absolute;
  background-color: transparent;
  block-size: 100%;
  cursor: ew-resize;
  inline-size: 8px;
  inset-block-start: 0;
  inset-inline-start: 0;
}

.resizable-handle:hover{
  background-color: #dbdbdb;
}
</style>
